<template>
	<view class="page">
		<view class="nav_bar" style="background-color: rgba(255, 255, 255, 1);" v-if="no_nav != 1">
			<uni-nav-bar color="#333" left-icon="left" title="创建圈子" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$native.backAction()"></uni-nav-bar>
		</view>

		<view class="nav_box" v-if="no_nav != 1"></view>

		<view class="input flex_r_between">
			<view class="title">圈子名称</view>

			<view class="right flex_center">
				<input type="text" v-model="info.name" placeholder="请输入活动标题" placeholder-class="input-placeholder"
					maxlength="10" />
				<text>{{ info.name.length }}/10</text>
			</view>
		</view>

		<view class="avatar">
			<view class="title">圈子头像</view>

			<view class="image" @click="upLoadAvatar">
				<image :src="$util.prefix('circle/upload.png')" mode="aspectFill" v-if="!info.avatar"></image>
				<image :src="info.avatar" mode="aspectFill" v-else></image>
			</view>
		</view>

		<view class="background">
			<view class="title flex_r_between">
				<text>圈子背景</text>
				<view class="image_upload_btn" @click="upLoadBg">
					<image :src="$util.prefix('public/upload_background.png')" mode="aspectFill"></image>
				</view>
			</view>

			<view class="image_box">
				<scroll-view scroll-x="true">
					<view class="scroll flex_center">
						<view class="image" :id="info.bg_img == item ? 'select' : ''"
							v-for="(item,index) in default_bg_imgs" :key="index" @click="info.bg_img = item">
							<image :src="item" mode="aspectFill"></image>
							<image src="/static/public/select_s.png" mode="aspectFill" class="icon"></image>
						</view>
					</view>
				</scroll-view>
			</view>




		</view>

		<view class="input flex_r_between">
			<view class="title">圈子所属行业</view>

			<view class="right flex_center">
				<input type="text" v-model="info.auth_industry" placeholder="请输入" placeholder-class="input-placeholder"
					maxlength="10" />
			</view>
		</view>

		<view class="circle_type">
			<view class="select flex_r_between" @click="show_circle_type = true">
				<view class="label flex_center">
					<text>圈子类型</text>
					<i>创建后无法修改</i>
				</view>
				<view class="right flex_center">
					<text>{{ info.circle_type == 1 ? '全国' : '同城'}}</text>
					<u-icon name="arrow-right" color="#131313" size="24rpx"></u-icon>
				</view>
			</view>
			<view class="address flex_r_between" @click="city_show = true" v-if="info.circle_type == 2">
				<view class="label">城市</view>
				<view class="right flex_center">
					<text v-if="info.province">{{ info.province }}-{{ info.city }}</text>
					<text v-else style="color: #999;">请选择</text>

					<u-icon name="arrow-right" color="#131313" size="24rpx"></u-icon>
				</view>
			</view>
		</view>

		<view class="desc">
			<view class="title">圈子简介</view>

			<view class="textarea">
				<textarea v-model="info.desc" placeholder="请输入圈子简介" placeholder-class="input-placeholder"
					maxlength="500"></textarea>
			</view>
		</view>

		<!-- 标签 -->
		<view class="tags">
			<view class="tags_title flex_r_between">
				<view class="block flex_center">
					<view class="title">标签</view>
					<text>搜索关键词</text>
				</view>

				<view class="length">
					{{ info.tags.length }}/10
				</view>
			</view>
			<view class="tags_list flex_center">
				<view class="tags_item flex_r_around" v-for="(item,index) in info.tags" :key="index">
					<text>{{ item }}</text>
					<view class="tags_list_icon" @click="info.tags.splice(index , 1)">
						<u-icon name="close-circle-fill" color="#FD2A53" size="32rpx"></u-icon>
					</view>
				</view>
			</view>

			<view class="tags_input flex_center" @click="show_tags = true">
				<view class="placeholder">{{ info.tags.length > 0 ? '继续添加' : '请输入' }}</view>
				<!-- <text>/6</text> -->
			</view>

		</view>

		<!-- 功能 -->
		<view class="function" v-if="!this.info.circle_id">
			<view class="title_block flex_r_between">
				<view class="block flex_center">
					<view class="title">圈子功能</view>
					<text>(自由组合)</text>
				</view>
				<view class="icon" style="padding: 0 10rpx;" @click="show_modal = true">
					<u-icon name="question-circle" size="32rpx" color="#B0B0B0"></u-icon>
				</view>
			</view>

			<view class="list">
				<view class="flex_center">
					<view class="item flex_center" @click="info.article_open = info.article_open == 1 ? 0 : 1">
						<text>动态</text>
						<image :src="`/static/public/select${info.article_open == 1 ? '_s' : ''}.png`"
							mode="aspectFill"></image>
					</view>
					<view class="item flex_center" @click="info.active_open = info.active_open == 1 ? 0 : 1">
						<text>活动</text>
						<image :src="`/static/public/select${info.active_open == 1 ? '_s' : ''}.png`" mode="aspectFill">
						</image>
					</view>
					<view class="item flex_center" @click="info.group_open = info.group_open == 1 ? 0 : 1">
						<text>群聊</text>
						<image :src="`/static/public/select${info.group_open == 1 ? '_s' : ''}.png`" mode="aspectFill">
						</image>
					</view>
					<view class="item flex_center" @click="info.card_open = info.card_open == 1 ? 0 : 1">
						<text>名片</text>
						<image :src="`/static/public/select${info.card_open == 1 ? '_s' : ''}.png`" mode="aspectFill">
						</image>
					</view>
					<view class="item flex_center" @click="info.member_open = info.member_open == 1 ? 0 : 1">
						<text>成员</text>
						<image :src="`/static/public/select${info.member_open == 1 ? '_s' : ''}.png`" mode="aspectFill">
						</image>
					</view>
					<view class="item flex_center" @click="info.live_open = info.live_open == 1 ? 0 : 1">
						<text>直播</text>
						<image :src="`/static/public/select${info.live_open == 1 ? '_s' : ''}.png`" mode="aspectFill">
						</image>
					</view>
					<view class="item flex_center" @click="info.goods_open = info.goods_open == 1 ? 0 : 1">
						<text>商品</text>
						<image :src="`/static/public/select${info.goods_open == 1 ? '_s' : ''}.png`" mode="aspectFill">
						</image>
					</view>
				</view>
			</view>
		</view>

		<!-- 权限 -->
		<!-- 	<view class="privilege">
			<view class="title">发布内容权限</view>

			<view class="list flex_r_between">
				<text>允许自己发布</text>
				<image src="/static/public/select.png"></image>
			</view>

			<view class="list flex_r_between">
				<text>允许所有人发布</text>
				<image src="/static/public/select.png"></image>
			</view>

		</view> -->

		<!-- 入圈方式 -->
		<!-- <view class="type">
			<view class="title">入圈方式</view>
			<view class="grey">
				<view class="select flex_r_between">
					<text>免费加入</text>
					<image src="/static/public/select.png"></image>
				</view>
			</view>

			<view class="grey">
				<view class="select flex_r_between">
					<text>付费加入</text>
					<image src="/static/public/select.png"></image>
				</view>
				<view class="list">
					<view class="list_input flex_center">
						<view class="label">入圈金额</view>
						<view class="right flex_center">
							<input type="number" placeholder="请输入金额" placeholder-class="input-placeholder" class="price_input" />
							<text>元</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="grey">
				<view class="select flex_r_between">
					<text>活动(邀请加入免入圈费)</text>
					<image src="/static/public/select.png"></image>
				</view>
				<view class="list">
					<view class="list_input flex_r_between">
						<view class="label">邀请</view>
						<view class="right flex_center no_flex1">
							<input type="number" placeholder="请输入" placeholder-class="input-placeholder" class="num_input" maxlength="3" />
							<text>人</text>
						</view>
					</view>
				</view>
			</view>

		</view> -->

		<view class="auth" v-if="!this.info.circle_id">
			<view class="header flex_r_between" @click="show_auth_type = true">
				<view class="label">选择圈子主体</view>
				<view class="right flex_center">
					<text>{{ info.auth_type == 1 ? '个人创建' : '企业创建' }}</text>
					<u-icon name="arrow-right" color="#131313" size="24rpx"></u-icon>
				</view>
			</view>

			<view class="auth_content" v-if="info.auth_type == 1">

				<view class="auth_input flex_center">
					<view class="label">姓名</view>
					<view class="auth_box">
						<input type="text" placeholder="请输入" placeholder-class="input-placeholder"
							v-model="info.auth_name" maxlength="10" />
					</view>
				</view>

				<view class="auth_input flex_center">
					<view class="label">身份证号</view>
					<view class="auth_box">
						<input type="text" placeholder="请输入" placeholder-class="input-placeholder"
							v-model="info.auth_idcard" maxlength="18" />
					</view>
				</view>

			</view>

			<view class="auth_content" v-else>

				<view class="auth_input flex_center">
					<view class="label">公司名称</view>
					<view class="auth_box">
						<input type="text" placeholder="请输入" placeholder-class="input-placeholder"
							v-model="info.auth_company_name" maxlength="30" />
					</view>
				</view>

				<view class="auth_input flex_center">
					<view class="label">联系人姓名</view>
					<view class="auth_box">
						<input type="text" placeholder="请输入" maxlength="10" placeholder-class="input-placeholder"
							v-model="info.auth_link_name" />
					</view>
				</view>

				<view class="auth_input flex_center">
					<view class="label">电话</view>
					<view class="auth_box">
						<input type="number" placeholder="请输入" maxlength="11" placeholder-class="input-placeholder"
							v-model="info.auth_phone" />
					</view>
				</view>

			</view>
		</view>

		<view class="rich_agree flex_r_around">
			<view class="flex_center">
				<image :src="`/static/public/select${is_agree ? '_s' : ''}.png`" mode="aspectFill"
					@click="is_agree = !is_agree"></image>
				<text>
					我已认真阅读并同意<text
						@click="toast = true">《超圈建圈协议》</text>
				</text>
			</view>
		</view>

		<view class="btn flex_r_around" @click="onSubmit">
			<text>创建</text>
		</view>

		<u-popup :show="show" mode="center" @close="show = false" bgColor="transparent">
			<view class="modal flex_c">
				<!-- <view class="icon flex_center">
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="show = false"></u-icon>
				</view> -->
				<view class="title">提示</view>
				<view class="text">{{ msg }}</view>
				<view class="modal_btn flex_r_around">
					<view class="item submit flex_r_around" @click="onModal">
						<text>确定</text>
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup :show="show_tags" @close="show_tags = false" mode="center" round="40rpx">
			<view class="modal_tags">
				<view class="modal_title flex_r_between">
					<text>标签</text>
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="show_tags = false"></u-icon>
				</view>

				<view class="modal_textarea">
					<textarea placeholder="请输入" placeholder-class="input-placeholder" v-model="tags_input"
						maxlength="6"></textarea>
				</view>

				<view class="modal_btn flex_r_around" @click="onEenterTag">
					<text>确定</text>
				</view>

			</view>
		</u-popup>

		<u-action-sheet :actions="auth_type_list" title="" :show="show_auth_type" @close="show_auth_type = false"
			@select="onShowAuthType" cancelText="取消">
		</u-action-sheet>

		<u-popup :show="show_modal" mode="center" @close="show_modal = false" bgColor="transparent">
			<view class="modal2 flex_c">
				<view class="title">圈子功能</view>
				<view class="text">根据需求选择功能，创建成功后点击圈子管理，可修改功能名称及权限设置</view>
				<view class="modal_btn flex_r_between">
					<view class="item submit flex_r_around" @click="show_modal = false">
						<text>确定</text>
					</view>
				</view>
			</view>
		</u-popup>

		<u-action-sheet :actions="circle_type_list" title="" :show="show_circle_type" @close="show_circle_type = false"
			@select="onShowCircleType" cancelText="取消">
		</u-action-sheet>

		<cityPicker :column="2" :mask-close-able="true" @confirm="onCity" @cancel="city_show = false"
			:visible="city_show" />

		<!-- 主播开播提醒 -->
		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="toast" @close="toast = false" mode="center" bgColor="transparent" :safeAreaInsetBottom="false" :closeOnClickOverlay="false">
				<view class="toast flex_c">
					<view class="toast_title">《超圈建圈协议》</view>

					<view class="scroll">
						<scroll-view scroll-y="true">
							<rich-text :nodes="rich_text"></rich-text>
						</scroll-view>
					</view>

					<view class="toast_btn flex_r_around red_btn" @click="onAgree">
						<text>阅读并同意</text>
					</view>

				</view>
			</u-popup>
		</view>

	</view>

</template>

<script>
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	export default {
		components: {
			cityPicker
		},
		data() {
			return {

				no_nav: 0,

				show_auth_type: false,

				auth_type_list: [{
						name: '个人创建',
						type: 1,
					},
					{
						name: '企业创建',
						num: 2,
					},
				],

				city_show: false,

				info: {
					circle_id: 0,
					// 圈子昵称
					name: '',
					// 头像
					avatar: '',
					// 简介
					desc: '',
					// 标签
					tags: [],
					// 是否开放商品：0=否，1=开放
					goods_open: 0,
					// 是否开放活动：0=否，1=开放
					active_open: 0,
					// 是否开放动态：0=否，1=开放
					article_open: 0,
					// 群组是否开放：0=否，1=开放
					group_open: 0,
					// 卡片是否开放：0=否，1=开放
					card_open: 0,
					// 直播是否开放：0=否，1=开放
					live_open: 0,
					// 成员
					member_open: 0,

					// 认证主体：1=个人，2=企业
					auth_type: 1,

					// 姓名
					auth_name: '',

					// 身份证
					auth_idcard: '',

					// 公司名称
					auth_company_name: '',

					// 联系人姓名
					auth_link_name: '',

					// 联系电话
					auth_phone: '',

					// 所属行业
					auth_industry: '',

					// 圈子类型：1=全国，2=同城
					circle_type: 1,
					// 圈子城市
					city: '',
					// 圈子省份
					province: '',

					// 圈子背景图
					bg_img: '',


				},

				show_circle_type: false,
				circle_type_list: [{
						name: '全国',
						type: 1,
					},
					{
						name: '同城',
						type: 2,
					},
				],

				tags_input: '',

				msg: '',
				code: 0,

				create_circle_id: 0,

				show: false,

				show_tags: false,

				show_modal: false,

				default_bg_imgs: [],

				is_agree: false,

				toast: false,
				
				rich_text: '',

			}
		},
		methods: {
			preventHandler() {
				return;
			},

			onEenterTag(e) {
				if (!this.tags_input) {
					return this.$util.msg('请填写标签')
				}
				if (this.info.tags.length < 10) {
					this.info.tags.push(this.tags_input);
				}
				this.tags_input = '';
				this.show_tags = false;
			},

			upLoadAvatar() {
				this.$native.authorize('photos');
				uni.chooseImage({
					count: 1,
					sizeType: 'compressed',
					crop: {
						width: 500,
						height: 500
					},
					success: (file) => {
						uni.navigateTo({
							url: `/pages/index/cropper?src=${file.tempFilePaths[0]}&no_nav=1`,
							events: {
								getImage: (data) => {
									this.info.avatar = data.src;
								}
							}
						});
					},
					fail(err) {
						this.$util.msg(err);
					}
				})
			},

			onSubmit() {

				if (!this.is_agree) {
					return this.$util.msg('请先阅读并同意《超圈建圈协议》');
				}

				// 是否开放动态：0=否，1=开放
				var article_open_flag = this.info.article_open != 1;
				// 是否开放活动：0=否，1=开放
				var active_open_flag = this.info.active_open != 1;
				// 群组是否开放：0=否，1=开放
				var group_open_flag = this.info.group_open != 1;
				// 卡片是否开放：0=否，1=开放
				var card_open_flag = this.info.card_open != 1;
				// 直播是否开放：0=否，1=开放
				var live_open_flag = this.info.live_open != 1;

				if (article_open_flag && active_open_flag && group_open_flag && card_open_flag && live_open_flag) {
					return this.$util.msg('请选择至少一个功能');
				}

				if (!this.info.circle_id) {
					if (this.info.auth_type == 1) {
						// 个人
						if (!this.info.auth_name) {
							return this.$util.msg('请填写姓名');
						}
						if (!this.info.auth_idcard) {
							return this.$util.msg('请填写身份证');
						}
					} else {
						// 企业
						if (!this.info.auth_company_name) {
							return this.$util.msg('请填写公司名称');
						}
						if (!this.info.auth_link_name) {
							return this.$util.msg('请填写联系人姓名');
						}
						if (!this.info.auth_phone) {
							return this.$util.msg('请填写联系电话');
						}
						if (!this.info.auth_industry) {
							return this.$util.msg('请填写所属行业');
						}
					}
				}

				if (!this.info.circle_id || this.info.circle_id == '0') {
					this.$post('/circle.circle/createCircle', this.info, false, (res) => {
						this.code = res.code;
						if (res.code == 5) {
							// 成功
							this.create_circle_id = res.data.circle_id;
							this.msg = res.msg;
							this.show = true;
						} else {
							this.$util.msg(res.msg);
						}
					}).then(res => {
						this.code = res.code;
						this.msg = res.msg;
						this.show = true;
						this.create_circle_id = res.data.circle_id;
						this.$native.createCircleSuccess(`${this.create_circle_id}`);
					});
				} else {
					this.$post('/circle.circle/submitCircleManage', this.info).then(res => {
						this.code = res.code;
						this.create_circle_id = res.data.circle_id;
						this.msg = res.msg;
						this.show = true;
						this.$native.createCircleSuccess(`${this.create_circle_id}`);
					});
				}

				// this.$util.toUrl(`/pages/circle/pay?info=${JSON.stringify(this.info)}`);
			},

			getCircleManageInfo() {
				this.$get('/circle.circle/getCircleManageInfo', {
					circle_id: this.info.circle_id
				}).then(res => {
					this.info.name = res.data.name || '';
					this.info.avatar = res.data.avatar || '';
					this.info.desc = res.data.desc || '';
					this.info.tags = res.data.tags.split(',');
					this.info.article_open = res.data.article_open;
					this.info.active_open = res.data.active_open || 0;
					this.info.group_open = res.data.group_open || 0;
					this.info.card_open = res.data.card_open || 0;
					this.info.live_open = res.data.live_open || 0;

					this.info.auth_type = res.data.auth_type || 1;
					this.info.auth_name = res.data.auth_name || '';
					this.info.auth_idcard = res.data.auth_idcard || '';
					this.info.auth_company_name = res.data.auth_company_name || '';
					this.info.auth_link_name = res.data.auth_link_name || '';
					this.info.auth_phone = res.data.auth_phone || '';
					this.info.auth_industry = res.data.auth_industry || '';
					this.info.city = res.data.city || '';
					this.info.province = res.data.province || '';
					this.info.circle_type = res.data.circle_type || '';
				})
			},

			onShowAuthType(e) {
				this.info.auth_type = e.type;
			},

			onShowCircleType(e) {
				this.info.circle_type = e.type;
			},

			onModal() {
				if (this.code == 1) {
					this.$native.backAction();
				} else {
					this.show = false;
				}
			},

			onCity(e) {
				this.info.province = e.provinceName;
				this.info.city = e.cityName;
				this.city_show = false;
			},

			getConfig() {
				this.$get('/circle.circle/getCreateInitInfo').then(res => {
					this.default_bg_imgs = res.data.default_bg_imgs;
					if (this.default_bg_imgs.length) {
						this.info.bg_img = this.default_bg_imgs[0];
					}
				})
			},

			upLoadBg() {
				this.$native.authorize('photos');
				uni.chooseImage({
					count: 1,
					sizeType: 'compressed',
					success: (file) => {
						uni.navigateTo({
							url: `/pages/index/cropper?src=${file.tempFilePaths[0]}&width=936&height=704&no_nav=1`,
							events: {
								getImage: (data) => {
									this.default_bg_imgs.unshift(data.src);
									this.info.bg_img = data.src;
								}
							}
						});
					},
					fail(err) {
						this.$util.msg(err)
					}
				})
			},

			onAgree(){
				this.is_agree = true;
				this.toast = false;
			},
			
			getRichText(type){
				this.$post(`/index/policy?type=building_protocol`).then(res=>{
					this.rich_text = res.data.building_protocol
				})
			},
			
		},

		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}
			if (option.circle_id != '0') {
				this.info.circle_id = option.circle_id || 0;
			}

			if (option.no_nav) {
				this.no_nav = option.no_nav;
			}

			if (this.info.circle_id && this.info.circle_id != 0 && this.info.circle_id != 'null') {
				this.getCircleManageInfo();
			}

			this.getConfig();
			this.getRichText();
		}
	}
</script>

<style lang="less" scoped>
	.page {
		padding: 32rpx;
	}

	.title {
		font-weight: 500;
		font-size: 28rpx;
		color: #131313;
	}

	.input {
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 24rpx;

		.right {
			input {
				flex: 1;
				text-align: right;
				font-size: 28rpx;
				color: #333;
			}

			text {
				font-size: 28rpx;
				color: #666666;
				margin-left: 10rpx;
			}
		}
	}

	.avatar {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx 24rpx 16rpx;
		margin: 20rpx 0;
		overflow: hidden;

		.image {
			width: 192rpx;
			height: 192rpx;
			margin-top: 16rpx;
			border-radius: 16rpx;
			overflow: hidden;

			image {
				width: 192rpx;
				height: 192rpx;
			}
		}
	}

	.background {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx 24rpx 16rpx;
		margin: 20rpx 0;
		overflow: hidden;

		.title {
			.image_upload_btn {
				width: 144rpx;
				height: 48rpx;

				image {
					width: 144rpx;
					height: 48rpx;
				}
			}
		}

		.image_box {
			margin-top: 24rpx;

			.scroll {}

			.image {
				margin-right: 24rpx;
				width: 468rpx;
				height: 352rpx;
				border-radius: 24rpx;
				overflow: hidden;
				flex-shrink: 0;
				position: relative;
				border: 6rpx solid transparent;

				image {
					width: 468rpx;
					height: 352rpx;
				}

				.icon {
					position: absolute;
					right: 24rpx;
					top: 24rpx;
					opacity: 0;
					width: 40rpx;
					height: 40rpx;
				}
			}

			#select {
				border: 6rpx solid #FD2A53;

				.icon {
					opacity: 1;
				}
			}
		}
	}

	.desc {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 34rpx 24rpx 24rpx;
		margin-top: 20rpx;

		.textarea {
			margin-top: 22rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			padding: 24rpx;

			textarea {
				font-size: 26rpx;
				color: #333;
				line-height: 36rpx;
			}
		}
	}

	.tags {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 38rpx 32rpx;
		margin-top: 20rpx;

		.tags_title {

			text {
				font-size: 24rpx;
				color: #999999;
				margin-left: 8rpx;
			}
		}

		.length {
			font-weight: 500;
			font-size: 26rpx;
			color: #999999;
			line-height: 36rpx;
		}

		.tags_list {
			flex-wrap: wrap;
			margin: 12rpx 0 18rpx;

			.tags_item {
				height: 56rpx;
				background: #F7F7F7;
				border-radius: 8rpx;
				padding: 0 36rpx;
				margin-right: 20rpx;
				margin: 8rpx 20rpx 8rpx 0;
				position: relative;

				text {
					font-weight: 500;
					font-size: 28rpx;
					color: #131313;
					line-height: 56rpx;
				}

				.tags_list_icon {
					position: absolute;
					right: -12rpx;
					top: -12rpx;
				}

			}
		}

		.tags_input {
			background: #F7F7F7;
			border-radius: 16rpx;
			height: 96rpx;
			padding: 0 24rpx;

			.placeholder {
				font-size: 26rpx;
				color: #666;
				flex: 1;
			}

			text {
				font-size: 26rpx;
				color: #999999;
				line-height: 36rpx;
			}
		}

	}

	.function {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx 24rpx;
		margin: 20rpx 0;

		.title_block {
			text {
				font-size: 24rpx;
				color: #999999;
				line-height: 34rpx;
			}
		}

		.list {
			overflow: hidden;
			padding-top: 10rpx;

			view {
				flex-wrap: wrap;
			}

			.item {
				flex-shrink: 0;
				padding: 10rpx 0;
				margin: 0 12rpx;

				text {
					font-size: 26rpx;
					color: #131313;
				}

				image {
					width: 32rpx;
					height: 32rpx;
					margin-left: 12rpx;
				}
			}
		}

	}

	.privilege {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx 24rpx;

		.list {
			height: 96rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			margin-top: 20rpx;
			padding: 0 24rpx;

			text {
				font-size: 26rpx;
				color: #131313;
				line-height: 36rpx;
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.type {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx 24rpx;
		margin: 20rpx 0 40rpx;

		.grey {
			background: #F7F7F7;
			border-radius: 16rpx;
			padding: 0 24rpx;

			.select {
				height: 96rpx;
				margin: 24rpx 0 20rpx;
				border-bottom: 2rpx solid #ECECEC;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-left: 40rpx;
				}

				text {
					font-size: 26rpx;
					color: #131313;
				}
			}

			.list {
				.list_input {
					height: 88rpx;

					.label {
						font-size: 26rpx;
						color: #131313;
						margin-right: 16rpx;
					}

					.no_flex1 {
						flex: 0 !important;
					}

					.right {
						flex: 1;

						.price_input {
							flex: 1;
							text-align: right;
							font-size: 28rpx;
							color: #333;
						}

						.num_input {
							width: 112rpx;
							height: 48rpx;
							background: #FFFFFF;
							border-radius: 8rpx;
							text-align: center;
							font-size: 28rpx;
							color: #333;
						}

						text {
							font-size: 26rpx;
							color: #131313;
							margin-left: 8rpx;
						}
					}
				}
			}
		}

	}

	.btn {
		margin: 0 auto 0;
		width: 560rpx;
		height: 100rpx;
		background: #FD2A53;
		border-radius: 50rpx;
		border: 2rpx solid #FD2A53;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.modal {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 80rpx 68rpx 48rpx;

		.title {
			font-weight: 500;
			font-size: 36rpx;
			color: #FD2A53;
			line-height: 50rpx;
			margin: 16rpx 0 8rpx;
		}

		.text {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			text-align: center;
		}

		.modal_btn {
			margin-top: 42rpx;

			.item {
				height: 88rpx;
				border-radius: 44rpx;
				width: 320rpx;

				text {
					font-size: 28rpx;
				}
			}

			.submit {
				background: #FD2A53;

				text {
					color: #FFF;
				}
			}
		}

		.icon {
			width: 100%;
			flex-direction: row-reverse;
		}
	}

	.auth {
		padding: 0 24rpx 4rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;

		.header {
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 16rpx;

			.label {
				font-weight: 500;
				font-size: 28rpx;
				color: #131313;
			}

			.right {
				text {
					font-size: 28rpx;
					color: #131313;
					margin-right: 12rpx;
				}
			}
		}

		.auth_content {
			overflow: hidden;

			.auth_input {
				height: 96rpx;
				background: #F7F7F7;
				border-radius: 16rpx;
				overflow: hidden;
				padding: 0 24rpx;
				margin-bottom: 20rpx;

				.label {
					font-size: 26rpx;
					color: #131313;
					line-height: 36rpx;
					margin-right: 16rpx;
				}

				.auth_box {
					flex: 1;

					input {
						font-size: 28rpx;
						color: #333;
						line-height: 36rpx;
						text-align: right;
					}
				}
			}
		}
	}

	.modal_tags {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 34rpx 16rpx 38rpx 32rpx;

		.modal_title {
			text {
				font-weight: 500;
				font-size: 36rpx;
				color: #131313;
				line-height: 50rpx;
			}
		}

		.modal_textarea {
			width: 552rpx;
			height: 208rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			padding: 24rpx;
			margin: 32rpx 0;
			overflow: hidden;

			textarea {
				font-size: 28rpx;
				color: #333;
				line-height: 36rpx;
			}
		}

		.modal_btn {
			width: 320rpx;
			height: 88rpx;
			background: #FD2A53;
			border-radius: 44rpx;
			margin: 0 auto;

			text {
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

	}

	.modal2 {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 80rpx 44rpx 62rpx;

		.title {
			font-weight: 500;
			font-size: 36rpx;
			color: #131313;
			line-height: 50rpx;
			margin: 16rpx 0 8rpx;
		}

		.text {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			text-align: center;
		}

		.modal_btn {
			margin-top: 42rpx;

			.item {
				height: 88rpx;
				border-radius: 44rpx;
				width: 320rpx;

				text {
					font-size: 28rpx;
				}
			}

			.submit {
				background: #FD2A53;

				text {
					color: #FFF;
				}
			}
		}

		.icon {
			width: 100%;
			flex-direction: row-reverse;
		}
	}

	.circle_type {
		background: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;
		padding: 0 32rpx;
		margin-top: 20rpx;

		.select {
			height: 100rpx;
			background: #FFFFFF;

			.label {
				font-weight: 500;
				font-size: 28rpx;
				color: #131313;
				line-height: 28rpx;

				text {
					font-weight: 500;
					font-size: 28rpx;
					color: #131313;
					line-height: 28rpx;
				}

				i {
					color: #666;
					font-style: normal;
					font-size: 24rpx;
					display: inline-block;
					margin-left: 12rpx;
					line-height: 28rpx;
					font-weight: 400;
				}
			}

			.right {
				text {
					font-size: 28rpx;
					color: #666666;
					margin-right: 12rpx;
				}
			}
		}

		.address {
			height: 96rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			padding: 0 24rpx;
			overflow: hidden;
			margin-bottom: 32rpx;

			.label {
				font-size: 26rpx;
				color: #131313;
				line-height: 36rpx;
				margin-right: 16rpx;
			}

			.right {
				flex: 1;

				text {
					flex: 1;
					overflow: hidden;
					font-size: 28rpx;
					color: #131313;
					line-height: 28rpx;
					text-align: right;
					margin-right: 12rpx;
				}
			}
		}
	}

	.rich_agree {
		margin: 60rpx auto 28rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 16rpx;
		}

		text {
			font-size: 24rpx;
			color: #131313;

			text {
				font-size: 24rpx;
				color: #FD2A53;
			}
		}
	}

	.toast {
		width: 640rpx;
		height: 60vh;
		background: linear-gradient(90deg, #D9F4FF 0%, #E8F1FD 54%, #F5E0FC 100%, #FAEBFF 100%);
		border-radius: 40rpx;
		padding: 48rpx 40rpx;

		.toast_title {
			font-weight: bold;
			font-size: 40rpx;
			color: #333333;
			line-height: 60rpx;
			padding-bottom: 24rpx;
		}

		.scroll {
			overflow: hidden;
			flex: 1;

			scroll-view {
				height: 100%;
			}

			.title {
				font-weight: 800;
				font-size: 30rpx;
				color: #333333;
				line-height: 42rpx;
			}

			.h {
				font-weight: 600;
				font-size: 28rpx;
				color: #333333;
				line-height: 42rpx;
			}

			.text {
				font-size: 26rpx;
				color: #333333;
				line-height: 42rpx;
			}

		}

		.toast_btn {
			margin-top: 48rpx;
			width: 400rpx;
			height: 96rpx;
			border-radius: 48rpx;

			text {
				font-weight: 500;
				font-size: 30rpx;
				line-height: 42rpx;
			}
		}

		.red_btn {
			background: #FD2A53;

			text {
				color: #FFFFFF;
			}
		}

		.white_btn {
			background: #F1F1F1;

			text {
				color: #666666;
			}
		}

	}
</style>